<template>
  <div style="display: inline-block;margin-right: 5px;">
    <Modal v-model="modal1"
           title="编辑"
           ok-text="提交"
           :loading="loading"
           @on-ok="handleSubmit('formValidate')">
      <Form ref="formValidate"
            :model="formValidate"
            :rules="ruleValidate"
            :label-width="80">
        <FormItem label="角色名称"
                  prop="typeName">
          <Input v-model="formValidate.typeName"
                 placeholder="请输入角色名称" />
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
import { editSystemUserType, getSystemUserTypeDetail } from '@/api/user'

export default {
  name: 'edit',
  data () {
    return {
      modal1: false,
      loading: true,
      formValidate: {
        typeName: ''
      },
      ruleValidate: {
        typeName: [
          { required: true, message: '角色名不能为空', trigger: 'blur' }
        ]
      },
      editData: {}
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.modal1 = false
      this.loading = true
      this.formValidate.typeName = ''
      this.editData = {}
      this.handleReset('formValidate')
    },
    getItem (id) {
      this.handleReset('formValidate')
      const getData = {
        'Id': id
      }
      getSystemUserTypeDetail(getData).then(res => {
        if (res.data.success) {
          this.formValidate.typeName = res.data.data.TypeName
          this.editData.Id = res.data.data.Id
        } else {
          this.$Message.info(res.data.data.msg)
        }
      }).then(() => {
        this.modal1 = true
      })
    },
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.editData.TypeName = this.formValidate.typeName
          this.editData.SysUserId = localStorage.getItem('userId')
          editSystemUserType(this.editData).then(res => {
            if (res.data.success) {
              this.modal1 = false
              this.loading = true
              this.$Message.info('编辑成功!')
            } else {
              this.modal1 = true
              this.loading = false
              this.$Message.info('编辑失败!')
            }
          }).then(() => {
            this.$emit('getList')
          })
        } else {
          this.modal1 = true
          this.loading = false
        }
      })
    },
    // 重置表单
    handleReset (name) {
      this.$refs[name].resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
</style>
